<template>
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="一级分类">
                <el-select :disabled="flagCard == 1 ? true : false" @change="C1Change" v-model="cateStore.C1Id" class="m-2"
                    placeholder="请选择">
                    <el-option v-for="item in cateStore.C1Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select :disabled="flagCard == 1 ? true : false" @change="C2Change" v-model="cateStore.C2Id" class="m-2"
                    placeholder="请选择">
                    <el-option v-for="item in cateStore.C2Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select :disabled="flagCard == 1 ? true : false" v-model="cateStore.C3Id" class="m-2" placeholder="请选择">
                    <el-option v-for="item in cateStore.C3Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import categoryStore from '@/store/modules/category'
defineProps(['flagCard'])

const cateStore = categoryStore()
onMounted(() => {
    cateStore.getC1gData()
})
const C1Change = () => {
    cateStore.C2Id = ''
    cateStore.C3Id = ''
    cateStore.C3Arr = []
    cateStore.getC2gData()
}
const C2Change = () => {
    cateStore.C3Id = ''
    cateStore.getC3gData()
}
</script>

<style scoped></style>